<template>
  <div class="bottom-right-cmp">
    <div class="chart-name">
      农田环境参数
      <dv-decoration-3 style="width:200px;height:20px;"/>
    </div>
    <dv-charts :option="option"/>
  </div>
</template>

<script>
const colors = ['#00baff', '#ff5ca9', '#3de7c9', '#f5d94e']
export default {
  name: 'bottomRightCmp',
  data() {
    return {
      option: {}
    }
  },
mounted() {
    const {loadData} = this
    loadData()
    setInterval(loadData, 30000)
  },
  methods: {
    async loadData() {
      const id = 1;
      const {data: res} = await this.$http.get('iotweb/farmlandreport/?id=' + id)
      let legend = {
        data: [],
        textStyle: {
          fill: '#fff'
        }
      }
      let xAxis = {
        data: res.dates,
        axisLine: {
          style: {
            stroke: '#999'
          }
        },
        axisLabel: {
          style: {
            fill: '#999'
          }
        },
        axisTick: {
          show: false
        }
      }
      let yAxis = {
        data: 'value',
        splitLine: {
          show: false
        },
        axisLine: {
          style: {
            stroke: '#999'
          }
        },
        axisLabel: {
          style: {
            fill: '#999'
          }
        },
        axisTick: {
          show: false
        },
        min: 1,
        max: 100
      }
      let series = [
            {
              name: res.msg[0].name,
              data: res.msg[0].data,
              type: 'bar',
              barStyle: {
                fill: 'rgba(0, 186, 255, 0.4)'
              }
            },
            {
              name: res.msg[1].name,
              data: res.msg[1].data,
              type: 'bar',
              barStyle: {
                fill: 'rgb(255,168,75)'
              }
            },
            {
              name: res.msg[2].name,
              data: res.msg[2].data,
              type: 'line',
              smooth: true,
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              },
              lineStyle: {
                lineDash: [5, 5]
              },
              linePoint: {
                radius: 4,
                style: {
                  fill: '#00db95'
                }
              }
            },
            {
              name: res.msg[3].name,
              data: res.msg[3].data,
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(245, 217, 79, 0.8)', 'rgba(245, 217, 79, 0.2)']
              },
              lineStyle: {
                stroke: '#f5d94e'
              },
              linePoint: {
                radius: 4,
                style: {
                  fill: '#f5d94e',
                  stroke: 'transparent'
                }
              }
            }
          ]
      res.msg.forEach(function (item, index) {
        legend.data.push({name: item.name, color: colors[index % 4]})
      })

      this.option = {
        legend: legend,
        xAxis: xAxis,
        yAxis: yAxis,
        series: series
      }
      console.log(this.option)
    }
  }

}
</script>

<style lang="less">
.bottom-right-cmp {
  width: 30%;
  height: 60%;
  box-sizing: border-box;
}
</style>
